<template>
  <div class="vinput-box" :class="itemdata.lCanInput === '0' ? 'disable-color' : ''">
    <template v-if="itemdata.sUIType == 'yearmonth'">
      <template v-if="itemdata.lMustInput === '1' && itemdata.lCanInput === '0'">
        <input class="vinput" size="mini" :id="itemdata.sField" v-model="itemdata.value" required placeholder="系统自动填充"
          readonly clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
      <template v-else-if="itemdata.lMustInput === '1'">
        <input class="vinput" size="mini" placeholder="请输入" :id="itemdata.sField" v-model="itemdata.value" required
          clearable @click="openYearMonth(itemdata)" :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
      <template v-else-if="itemdata.lCanInput === '0'">
        <input class="vinput" size="mini" :id="itemdata.sField" v-model="itemdata.value" placeholder="系统自动填充" readonly
          clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
      <template v-else>
        <input class="vinput" size="mini" :id="itemdata.sField" v-model="itemdata.value" placeholder="请输入" readonly
          clearable @click="openYearMonth(itemdata)" :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
    </template>
    <template v-else-if="ishead">
      <template v-if="itemdata.lMustInput === '1' && itemdata.lCanInput === '0'">
        <input class="vinput" size="mini" :id="itemdata.sField" v-model="itemdata.value" required placeholder="系统自动填充"
          readonly clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
      <template v-else-if="itemdata.lMustInput === '1'">
        <input class="vinput" size="mini" placeholder="请输入" :id="itemdata.sField" v-model="itemdata.value" required
          clearable @click="openDatePicker(itemdata)" :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
      <template v-else-if="itemdata.lCanInput === '0' && itemdata.idObject == 'weekreports'">
        <template v-if="itemdata.sField === 'bzjsrq'">
          <input class="vinput" size="mini" :id="itemdata.sField" v-model="bzjsrqField" placeholder="系统自动填充" readonly
            clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
        </template>
        <template v-else-if="itemdata.sField === 'xzksrq'">
          <input class="vinput" size="mini" :id="itemdata.sField" v-model="xzksrqField" placeholder="系统自动填充" readonly
            clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
        </template>
        <template v-else-if="itemdata.sField === 'xzjsrq'">
          <input class="vinput" size="mini" :id="itemdata.sField" v-model="xzjsrqField" placeholder="系统自动填充" readonly
            clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
        </template>
        <template v-else>
          <input class="vinput" size="mini" :id="itemdata.sField" v-model="itemdata.value" disabled clearable
            :error-message="itemdata.errormsg" @focus="iptFoucus" />
        </template>
      </template>
      <template v-else-if="itemdata.lCanInput === '0' && itemdata.idObject != 'weekreports'">
        <input class="vinput" size="mini" :id="itemdata.sField" v-model="itemdata.value" placeholder="系统自动填充" readonly
          clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
      <template v-else>
        <input class="vinput" size="mini" :id="itemdata.sField" v-model="itemdata.value" placeholder="请输入" readonly
          clearable @click="openDatePicker(itemdata)" :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
    </template>
    <template v-else>

      <template v-if="itemdata.lMustInput === '1' && itemdata.lCanInput === '0'">
        <input class="vinput" size="mini" :id="index + '_' + itemdata.sField" v-model="itemdata.value" required
          placeholder="系统自动填充" readonly clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
      <template v-else-if="itemdata.lMustInput === '1'">
        <input class="vinput" size="mini" placeholder="请输入" :id="index + '_' + itemdata.sField" v-model="itemdata.value"
          required clearable readonly @click="openDatePicker(itemdata)" :error-message="itemdata.errormsg"
          @focus="iptFoucus" />
      </template>
      <template v-else-if="itemdata.lCanInput === '0'">
        <input class="vinput" size="mini" :id="index + '_' + itemdata.sField" v-model="itemdata.value"
          placeholder="系统自动填充" readonly clearable :error-message="itemdata.errormsg" @focus="iptFoucus" />
      </template>
      <template v-else>
        <input class="vinput" size="mini" placeholder="请输入" :id="index + '_' + itemdata.sField" readonly
          v-model="itemdata.value" clearable @click="openDatePicker(itemdata)" :error-message="itemdata.errormsg"
          @focus="iptFoucus" />
      </template>


    </template>

    <!-- <van-popup v-model="datepickershow" round position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @confirm="selectedDate" :min-date="minDate" />
    </van-popup>
    <van-popup v-model="datetimeshow" round position="bottom" >
      <van-datetime-picker v-model="currentDate" type="datetime" @confirm="selectedDateTime" />
    </van-popup>
    <van-popup v-model="yearmonthshow" round position="bottom">
      <van-datetime-picker v-model="currentYearMonth" type="year-month" @confirm="selectedYearMonth" />
    </van-popup> -->
    <!-- <input type="text" v-model="test1"> -->
    <!-- <portal to="target-portal" >

      111
      <van-popup v-model="datepickershow" round position="bottom">
        <van-datetime-picker v-model="currentDate" type="date" @confirm="selectedDate" :min-date="minDate" />
      </van-popup>
      <van-popup v-model="datetimeshow" round position="bottom" ref="datetimeshow">
        <van-datetime-picker v-model="currentDate" type="datetime" @confirm="selectedDateTime" />
      </van-popup>
      <van-popup v-model="yearmonthshow" round position="bottom">
        <van-datetime-picker v-model="currentYearMonth" type="year-month" @confirm="selectedYearMonth" />
      </van-popup>
    </portal> -->
    <!-- <portal to="target-portal" > -->
    <!-- <input type="text" v-model="test">

      <div>{{ datepickershow }}</div>
      <div>{{ datetimeshow }}</div>
      <div>{{ yearmonthshow }}</div>
      <div @click="testFunc">{{ test }}</div> -->


    <!-- <van-popup v-model="datepickershow" round position="bottom">
        <van-datetime-picker v-model="currentDate" type="date" @confirm="selectedDate" :min-date="minDate" />
      </van-popup>
      <van-popup v-model="datetimeshow" round position="bottom" ref="datetimeshow">
        <van-datetime-picker v-model="currentDate" type="datetime" @confirm="selectedDateTime" />
      </van-popup>
      <van-popup v-model="yearmonthshow" round position="bottom">
        <van-datetime-picker v-model="currentYearMonth" type="year-month" @confirm="selectedYearMonth" />
      </van-popup> -->



    <!-- </portal> -->



  </div>
</template>
<script>
// import {Portal} from "portal-vue";
export default {
  // components: {
  //   Portal
  // },
  data() {
    return {
      test: "levy",
      test1: "levy",
      minDate: new Date(1900, 0, 1),

      
      yearmonthshow: false,
      datepickershow: false,
      datetimeshow: false,
   
      clickmodel: {},
      currentDate: new Date(),
      currentYearMonth: new Date(),
    }
  },
  props: {
    // yearmonthshow: false,
    // datepickershow: false,
    // datetimeshow: false,
    bzjsrqField: {
      type: String,
      required: false
    },
    xzksrqField: {
      type: String,
      required: false
    },
    xzjsrqField: {
      type: String,
      required: false
    },
    itemdata: {
      type: Object,
      required: false
    },
    ishead: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      required: false
    }
  },
  updated() {
    console.log("updated")
  },
  // watch: {
  //   test1(val){
  //     console.log(val)
  //   },


  //   test(val) {
  //     console.log(val)
  //     this.$nextTick(() => {
  //       console.log(this.test1)
  //       this.test1 = val
  //     })

  //   },
  //   datetimeshow(val) {
  //     console.log("datetimeshow", val)
  //     this.datetimeshow1 = val


  //   },
  //   datetimeshow1(val) {
  //     // this.datetimeshow = val

  //     console.log("datetimeshow", this.datetimeshow)
  //   },
  // },
  methods: {
    testFunc() {
      this.test = this.test.split(0, this.test.length - 1)
    },
    iptFoucus() {
      document.activeElement.blur()
    },
    openDatePicker(datamodel) {
      if (datamodel.value != null && datamodel.value !== undefined && datamodel.value !== '') {
        if (datamodel.sUITypeExp !== 'long') {
          datamodel.value = datamodel.value.substring(0, 10)
        }
        let newDate = new Date(datamodel.value.replace(/-/g, '/'))
        this.currentDate = new Date(newDate)
      }
      this.clickmodel = datamodel

      if (datamodel.sUITypeExp === 'long') {
        // this.datetimeshow = true
        this.$emit("update:datetimeshow",true)
      } else {
        // this.datepickershow = true
        this.$emit("update:datepickershow",true)


      }
    },
    selectedDate(currentDate) {

      let year = currentDate.getFullYear() // 获取完整的年份(4位,1970-????)
      let month = currentDate.getMonth() // 获取当前月份(0-11,0代表1月)
      let day = currentDate.getDate() // 获取当前日(1-31)

      if (this.clickmodel.idObject === 'weekreports') {
        // 设置 本周开始日期
        this.clickmodel.value = this.getWeekStartDate(year, month, day)
        // 设置 本周结束日期
        this.$emit('update:bzjsrqField', this.getWeekEndDate(year, month, day))
        // 设置 下周开始日期
        this.$emit('update:xzksrqField', this.getNextWeekStartDate(year, month, day))
        // 设置 下周结束日期
        this.$emit('update:xzjsrqField', this.getNextWeekEndDate(year, month, day))
      } else {
        month += 1
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        let dateString = year + '-' + month + '-' + day

        this.clickmodel.errormsg = ''
        this.clickmodel.value = dateString
      }

      this.datepickershow = false
      this.$emit("update:datepickershow",false)
      


    },
    selectedDateTime(currentDate) {
      // console.log(currentDate)
      let year = currentDate.getFullYear() // 获取完整的年份(4位,1970-????)
      let month = currentDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
      let day = currentDate.getDate() // 获取当前日(1-31)
      let hour = currentDate.getHours()
      let minute = currentDate.getMinutes()
      if (month < 10) {
        month = '0' + month
      }
      if (day < 10) {
        day = '0' + day
      }
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      let dateString = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':00'
      this.clickmodel.value = dateString
      this.clickmodel.errormsg = ''
      // this.datetimeshow = false
      this.$emit("update:datetimeshow",false)


    },
    // 获得本周的开始日期
    getWeekStartDate(y, m, d) {
      var now = new Date(y, m, d) // 当前日期

      var nowDayOfWeek = now.getDay() || 7 // 今天本周的第几天
      var nowDay = now.getDate() // 当前日
      var nowMonth = now.getMonth() // 当前月
      var nowYear = now.getFullYear() // 当前年
      var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1)
      return this.formatDate(weekStartDate)
    },
    // 获得本周的结束日期
    getWeekEndDate(y, m, d) {
      return this.formatDate(this.getWeekEndDateObj(y, m, d))
    },
    getWeekEndDateObj(y, m, d) {
      var now = new Date(y, m, d) // 当前日期
      var nowDayOfWeek = now.getDay() || 7 // 今天本周的第几天

      var nowDay = now.getDate() // 当前日
      var comp = nowDay + 7 - nowDayOfWeek
      // 周日就不用加了
      if (nowDayOfWeek === 0) {
        comp = nowDay
      }

      var nowMonth = now.getMonth() // 当前月
      var nowYear = now.getFullYear() // 当前年

      var weekEndDate = new Date(nowYear, nowMonth, comp)

      return weekEndDate
    },
    getNextWeekStartDate(y, m, d) {
      return this.formatDate(this.getNextWeekStartDateObj(y, m, d))
    },
    getNextWeekStartDateObj(y, m, d) {
      let date = this.getWeekEndDateObj(y, m, d)
      date.setDate(date.getDate() + 1)
      return date
    },
    getNextWeekEndDate(y, m, d) {
      let date = this.getWeekEndDateObj(y, m, d)
      date.setDate(date.getDate() + 7)
      return this.formatDate(date)
    },
    // 格式化日期：yyyy-MM-dd
    formatDate(date) {
      var myyear = date.getFullYear()
      var mymonth = date.getMonth() + 1
      var myweekday = date.getDate()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return (myyear + '-' + mymonth + '-' + myweekday)
    },
    openYearMonth(datamodel) {
      if (datamodel.value != null && datamodel.value !== undefined && datamodel.value !== '') {
        datamodel.value = datamodel.value.substring(0, 7)
        this.currentYearMonth = new Date(datamodel.value)
      }
      this.clickmodel = datamodel
      // this.yearmonthshow = true
      this.$emit("update:yearmonthshow",true)
      

    },
    selectedYearMonth(currentYearMonth) {
      //console.log(this.currentYearMonth)
      let year = currentYearMonth.getFullYear()
      let month = currentYearMonth.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let datestring = year + '-' + month
      this.clickmodel.value = datestring
      this.clickmodel.errormsg = ''
      // this.yearmonthshow = false
      this.$emit("update:yearmonthshow",false)

    }
  },
  activated() {

  }
}
</script>
